<template>
    <div style="padding: 10px">
            <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
    </div>
    <div id="he-plugin-standard" :style="{}"></div>

</template>

<script>
    import request from "../utils/request";

    export default {
        name: "Home",
        data(){
            return{}
        },
        mounted() {
            this.drawLine()
        },
        methods: {
            drawLine() {
                let myChart = this.$root.echarts.init(document.getElementById('myChart'))
                let option = {
                    title: {
                        text: '各地区用户比例统计图',
                        subtext: 'Fake Data',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [50, 250],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: []
                        }
                    ]
                }
                request.get("/user/count").then(res => {
                    res.data.forEach(item => {
                        option.series[0].data.push({name: item.address, value: item.count})
                    })
                    // 绘制图表
                    myChart.setOption(option);
                })

            },

        },
        created() {
            window.WIDGET = {
                "CONFIG": {
                    "layout": "2",
                    "width": 400,
                    "height": 600,
                    "left": 100,
                    "background": "1",
                    "dataColor": "FFFFFF",
                    "borderRadius": "10",
                    "key": "4a3018e7ad054d83bfdfc489aafe7087"  //这里换成自己的key！
                }
            }
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
            document.getElementsByTagName('head')[0].appendChild(script);
        },

    }
</script>


<style scoped>

</style>
